<script setup>
import { ref, onMounted } from 'vue';
import tarbar from '@/layout/tarbar/tarbar.vue';
import navbar from '@/layout/header/navbar.vue';
import { getClusterList, createCluster, updateCluster, deleteCluster } from '@/api/cluster';
import { showConfirmDialog } from 'vant';

// 集群列表
const clusters = ref([]);
// 是否显示添加集群对话框
const showAddClusterDialog = ref(false);
// 是否显示编辑集群对话框
const showEditClusterDialog = ref(false);

// 添加集群的数据
const newCluster = ref({
  clusterName: '',
  url: '',
  token: '',
  version: '',
  type: '',
});

// 编辑集群的数据
const editCluster = ref({
  id: '',
  clusterName: '',
  url: '',
  token: '',
  version: '',
  type: '',
});

// 获取集群列表
async function fetchClusters() {
  try {
    clusters.value = await getClusterList();
  } catch (error) {
    console.error('获取集群列表失败:', error);
  }
}

// 挂载时获取集群列表
onMounted(fetchClusters);

// 显示添加集群对话框
function handleAddClusterClick() {
  showAddClusterDialog.value = true;
}

// 提交添加集群表单
async function submitAddClusterForm() {
  try {
    await createCluster(newCluster.value);
    // 关闭对话框
    showAddClusterDialog.value = false;
    // 清空表单
    newCluster.value = {
      clusterName: '',
      url: '',
      token: '',
      version: '',
      type: '',
    };
    // 刷新集群列表
    fetchClusters();
  } catch (error) {
    console.error('创建集群失败:', error);
  }
}

// 打开编辑集群对话框
function handleEditClusterClick(cluster) {
  editCluster.value = { ...cluster };
  showEditClusterDialog.value = true;
}

// 提交编辑集群表单
async function submitEditClusterForm() {
  try {
    await updateCluster(editCluster.value.id,editCluster.value);
    // 关闭对话框
    showEditClusterDialog.value = false;
    // 刷新集群列表
    fetchClusters();
  } catch (error) {
    console.error('更新集群失败:', error);
  }
}

// 删除集群
async function handleDeleteClusterClick(clusterId) {
  try {
    await deleteCluster(clusterId);
    // 刷新集群列表
    fetchClusters();
  } catch (error) {
    console.error('删除集群失败:', error);
  }
}

// 添加确认删除方法
const confirmDelete = (cluster) => {
  showConfirmDialog({
    title: '确认删除',
    message: `是否确认删除集群 "${cluster.clusterName}"？`,
    confirmButtonText: '删除',
    confirmButtonColor: '#ee0a24',
  }).then(() => {
    handleDeleteClusterClick(cluster.id);
  }).catch(() => {
    // 取消删除
  });
};
</script>

<template>
  <navbar/>
  <div class="cluster-container">
    <div class="cluster-header">
      <h2 class="cluster-title">集群管理</h2>
      <van-button 
        round 
        type="primary" 
        size="small" 
        icon="plus" 
        @click="handleAddClusterClick"
        class="add-cluster-btn"
      >
        添加集群
      </van-button>
    </div>

    <div class="cluster-grid">
      <div v-for="(cluster, index) in clusters" 
           :key="index"
           class="cluster-card"
      >
        <div class="cluster-card__header">
          <van-icon name="cluster-o" size="24" class="cluster-icon"/>
          <span class="cluster-name">{{ cluster.clusterName }}</span>
        </div>
        
        <div class="cluster-card__content">
          <div class="cluster-info">
            <div class="info-item">
              <van-icon name="info-o" />
              <span>版本: {{ cluster.version }}</span>
            </div>
            <div class="info-item">
              <van-icon name="link" />
              <span class="url-text">{{ cluster.url }}</span>
            </div>
          </div>
        </div>

        <div class="cluster-card__footer">
          <van-button 
            round 
            type="primary" 
            size="small" 
            icon="edit" 
            @click="handleEditClusterClick(cluster)"
          >
            配置
          </van-button>
          <van-button 
            round 
            type="danger" 
            size="small" 
            icon="delete" 
            @click="confirmDelete(cluster)"
          >
            删除
          </van-button>
        </div>
      </div>
    </div>
  </div>

  <!-- 添加集群对话框 -->
  <van-dialog
    v-model:show="showAddClusterDialog"
    title="添加集群"
    show-cancel-button
    @confirm="submitAddClusterForm"
    class="cluster-dialog"
  >
    <van-form>
      <van-cell-group inset>
        <van-field
          v-model="newCluster.clusterName"
          label="集群名称"
          placeholder="请输入集群名称"
          :rules="[{ required: true, message: '请填写集群名称' }]"
        />
        <van-field
          v-model="newCluster.url"
          label="URL"
          placeholder="请输入URL"
          :rules="[{ required: true, message: '请填写URL' }]"
        />
        <van-field
          v-model="newCluster.token"
          label="Token"
          type="password"
          placeholder="请输入Token"
          :rules="[{ required: true, message: '请填写Token' }]"
        />
        <van-field
          v-model="newCluster.version"
          label="版本"
          placeholder="请输入版本"
          :rules="[{ required: true, message: '请填写版本' }]"
        />
        <van-field
          v-model="newCluster.type"
          label="类型"
          placeholder="请输入类型"
          :rules="[{ required: true, message: '请填写类型' }]"
        />
      </van-cell-group>
    </van-form>
  </van-dialog>

  <!-- 编辑集群对话框 -->
  <van-dialog
    v-model:show="showEditClusterDialog"
    title="编辑集群"
    show-cancel-button
    @confirm="submitEditClusterForm"
    class="cluster-dialog"
  >
    <van-form>
      <van-cell-group inset>
        <!-- 与添加对话框相同的字段 -->
        <van-field
          v-model="editCluster.clusterName"
          label="集群名称"
          placeholder="请输入集群名称"
          :rules="[{ required: true, message: '请填写集群名称' }]"
        />
        <!-- ... 其他字段相同 ... -->
      </van-cell-group>
    </van-form>
  </van-dialog>

  <tarbar/>
</template>

<style scoped>
.cluster-container {
  padding: 16px;
  background: var(--background-color);
  min-height: calc(100vh - 100px);
}

.cluster-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.cluster-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-color);
  margin: 0;
}

.add-cluster-btn {
  font-weight: 500;
}

.cluster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.cluster-card {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.cluster-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.cluster-card__header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.cluster-icon {
  color: var(--primary-color);
  margin-right: 8px;
}

.cluster-name {
  font-size: 18px;
  font-weight: 500;
  color: var(--text-color);
}

.cluster-card__content {
  margin-bottom: 16px;
}

.cluster-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
}

.url-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}

.cluster-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* 对话框样式 */
.cluster-dialog {
  :deep(.van-dialog__header) {
    padding: 20px 0;
    font-weight: 600;
  }

  :deep(.van-dialog__content) {
    padding: 16px;
  }

  :deep(.van-cell-group) {
    margin: 8px 0;
  }
}
</style>